<template>
	<!--"'mes_' + (messageList.length-1)"  -->
	<view class="fixed search top" style="z-index: 5;background-color: aliceblue;display: flex;align-items: center">
		<view class="action" @click="goback" style="z-index: 20;">
			<text class="cuIcon-back text-gray"></text>
		</view>
		<view class="center-content">
			<view class="top_right">
				<view class="cu-avatar round"
					:style="{ 'background-image': 'url(' + 'http://8.146.208.139:4000/avator/1715854209824.png' + ')' }">
				</view>
			</view>
			<view class="content" style="text-align: center;">
				系统通知
			</view>
		</view>
	</view>
	<scroll-view class="contain bg-white" :scroll-into-view="bot" scroll-y="true" @scroll="inscroll">
		<van-empty description="暂无消息"
			image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" v-if="messageList.length==0"/>
		<view class="cu-chat" v-for="(item, index) in messageList" :id="`mes_${index}`" :key="index" ref="mesRef"
			style="margin-top: 20px;" v-else>
			<!-- <view class="cu-item">
				<view class="cu-avatar radius bg-white"
					style="background-image:url(http://8.146.208.139:4000/avator/1715854209824.png);">
				</view>
				<view class="main">
					<view class="content bg-blue light shadow">
						<text>{{ item.content }}</text>
					</view>
				</view>
				<view class="date "> {{ item.time }}</view>
			</view> -->
			<!-- 申请 -->
			<view class="apply">
				<h3 style="font-weight: 500;width: 80%;text-align: center;margin-top: 20px; margin-bottom: -15px;font-size: 21px;"
					class="text-white" v-if="item.type==1">
					{{ item.message.userName+'申请加入'+ item.message.groupName}}
				</h3>
				<h3 style="font-weight: 500;width: 80%;text-align: center;margin-top: 20px; margin-bottom: -15px;font-size: 21px;"
					class="text-white" v-if="item.type==2">
					{{ item.message.userName+'回复您的申请加入'+ item.message.groupName}}
				</h3>
				<view style="width: 17rem;margin: 0 auto;display: flex; height: 70px;">
					<view style="display: flex;align-items: center;margin-top: 25px;">
						<view class='cu-avatar round' :style="'background-image: url(' + item.message.userAvatar + ');'"></view>
						<h4 class="text-xl text-white" style="margin-left: 10px;">{{ item.message.userName }}</h4>
					</view>
					<view class="applyBtns" style="width:4rem;display: flex;margin-top: 35px;margin-left: -2rem;" v-if="item.type == 1&&item.isRead == 0">
						<view class="status cu-item text-red" style="margin-right: 20px;" @click="refuse(item)">
							<view class="action">
								<view class="cu-tag round bg-red lg light text-lg"
									style="width: 4rem;height: 2rem; margin-left: 4rem;"><text
										class="cuIcon-roundclosefill text-lg"></text>拒绝
								</view>
							</view>
						</view>
						<view class="status cu-item text-red" style="margin-left: 1rem;margin-left: -4rem;"
							@click="Agree(item)">
							<view class="action">
								<view class="cu-tag round bg-green lg light text-lg" style="width: 4rem;height: 2rem;">
									<text class="cuIcon-check  text-lg"></text>同意
								</view>
							</view>
						</view>
					</view>

					<view style="width:25rem;display: flex;justify-content: right;margin-top: 30px;"
						v-else-if="(item.type==1&&item.isRead == 3)||(item.type==2&&item.isRead==0&&item.message.result==false)">
						<view class="" style="color: black;">
							<view style="letter-spacing: 1px; width: 5rem;height: 2rem;"
								class="cu-tag round bg-red light text-lg"><text class="cuIcon-roundclosefill"></text>
								已拒绝</view>
						</view>
					</view>
					<view style="width:25rem;display: flex;justify-content: right;margin-top: 30px;"
						v-else-if="(item.type==1&&item.isRead == 2)||(item.type==2&&item.isRead==0&&item.message.result==true)">
						<view style="color: greenyellow;">
							<view class="cu-tag round bg-gradual-green light text-lg"><text class="cuIcon-check"></text>
								已同意</view>
						</view>
					</view>
					<!-- 	<view style="width:25rem;display: flex;justify-content: right;margin-top: 12px;">
									<view style="color: greenyellow;">
										<view class="cu-tag round bg-gradual-green light text-lg"><text class="cuIcon-check"></text> 已同意</view>
									</view>
								</view> -->
				</view>
			</view>
		</view>
	</scroll-view>
</template>
<style scoped lang="less">
.apply {
	// border: 1px solid black;
	width: 90%;
	padding-bottom: 15px;
	margin: 0 auto;
	background: url('http://8.146.208.139:4000/avator/1715860234857.png');
	background-size: cover;
	border-top-right-radius: 13px;
	border-bottom-right-radius: 13px;
	border-bottom-left-radius: 13px;

}

@import url("../../static/chat_icon/iconfont.css");

.input {
	width: 80vw;
	height: 45px;
	padding: 12px;
	border-radius: 12px;
	border: 1.5px solid lightgrey;
	outline: none;
	transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
	box-shadow: 0px 0px 20px -18px;
}

.input:hover {
	border: 2px solid lightgrey;
	box-shadow: 0px 0px 20px -17px;
}

.input:active {
	transform: scale(0.95);
}

.input:focus {
	border: 2px solid grey;
}

.center-content {
	margin-left: -30px;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contain {
	height: 90vh !important;
	width: 100vw;
	padding-bottom: 20px;
	// padding-top: 5vh;
}


.cu-bar {
	width: 100vw;
}

@media screen and (min-width: 1200px) {
	.cu-bar {
		width: 30vw;
	}
}

.top {
	padding-top: 2vh;
	height: 10vh;
	// line-height: 15vh;
	display: flex;
	align-items: center;
	width: 100%;
	// justify-content: space-between;
	// align-items: center;
	padding-left: 3vh;
	padding-right: 3vh;
}


.tools {
	width: 100%;
	height: 5vh;
	border: 1px solid black;
	position: absolute;
	bottom: 8vh;
	background-color: ghostwhite;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;

	// display: flex;
	.tool {
		height: 5vh;
		line-height: 5vh;
		margin-left: 5px;
		font-size: 40rpx;
	}
}

.invite {
	width: 70%;
	border-radius: 10%;
	background-color: aliceblue;
	// border: 1px solid black;
	margin: 10px auto;

	.title {
		width: 100%;
		text-align: center;
		font-weight: 700;
	}

	.content {
		margin: 10px auto;
		text-align: center;
		max-width: 70%;
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 7px;
	}
}
</style>
<script>
import {
	rebackJoin,
	MessageList
} from '@/store/api.js'
import {
	gettime
} from '@/store/constants.js'
export default {
	data() {
		return {
			able: true,
			bot: '',
			scrollTop: 0,
			scrollHeight: 0,
			clientHeight: 0,
			myavatar: '',
			scrollTop: 0,
			showList: false,
			InputBottom: 0,
			msg: '',
			messageList: []
		};
	},
	onLoad(value) {
		MessageList(1,30).then(res=>{
			console.log(res)
			res.data.data.rows.forEach(item=>{
				this.messageList.unshift({
					type:item.type,
					id:item.id,
					isRead:item.isRead,
					message:JSON.parse(item.message)
				})
			})
		}).catch(err=>{
			console.log(err)
		})
	},
	mounted() {
	},
	methods: {
		Agree(item) {
			let data={
				id:item.id,
				groupId:item.message.groupId,
				userId:item.message.userId,
				isRead:2
			}
			rebackJoin(data).then(res=>{
				console.log(res)
				this.messageList.find(it => it.id == item.id).isRead = 2
				uni.showToast({
					icon: 'success',
					title: '已同意'
				})
			}).catch(err=>{
				console.log(err)
				uni.showToast({
					icon: 'error',
					title: '回复失败'
				})
			})
		},
		refuse(item) {
			let data={
				id:item.id,
				groupId:item.message.groupId,
				userId:item.message.userId,
				isRead:3
			}
			rebackJoin(data).then(res=>{
				console.log(res)
				this.messageList.find(it => it.id == item.id).isRead = 3
				uni.showToast({
					icon: 'fail',
					title: '已拒绝'
				})
			}).catch(err=>{
				console.log(err)
				uni.showToast({
					icon: 'error',
					title: '回复失败'
				})
			})
		},
		goback() {
			this.ifclose = false
			uni.navigateBack()
		},
	}
};
</script>